<template>
	<view class="content">
		<view class="navBar">
			<view class="left">
				<uni-icons class="left-icon" type="arrowleft" size=24 color="#fff"></uni-icons>
				</view>
			<view class="center">
			</view>
			<view class="right">
				<view v-for="(item,index) in top_tab" :key='index' :id="index" class="uni-tab-item"
					@click="commentfun">
					<text class="uni-tab-item-title">{{item}}</text>
				</view>
			</view>
		</view>
		<!-- asasa -->
	<view class="evaluate">

		<view class="input-textarea">
			<textarea class="textaerav" placeholder="写下你的评论" :value="comment"  @blur="bindTextAreaBlur" @input="bindTextAreaInput"/>
			<view class="inline-text">图片：</view>
			<view class="upimg-video">
				<view class="defaultup">
					<view class="defaultupflex" v-for="(item,index) in defaultimgvdo" :key="index" @click="upfile(item.type)">
						<image :src="item.srcimg" class="defaultimg"></image>
						<view>{{item.text}}</view>
					</view>
				</view>
				<view class="realyimg" v-if="realyimhlist.length>0">
					<view class="realyimgflex" v-for="(item,index) in realyimhlist" :key="index">
						<view class="imgborder">
							<image :src="item" class="limitimg"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="inline-text">发表至：
			<view class="small" >选择小组后，帖子在组内和广场上均可见</view>
			</view>
			<view class="chose-group" v-if="postGroupName!=''">
				<image class="group-img" :src="postGroupImg"></image>
				<text class="group-text">{{postGroupName}}</text>
				<button class="group-button">删除</button>
			</view>
			<button class="add-button">添加兴趣小组+</button>
			<view class="tag-text">添加标签:
				<view class="small">
					添加几个标签，让大家更快速地了解你
				</view>
			</view>
<!-- 			<span>
				<button class="tag">asdasd</button>
				<button class="tag">asdasd</button>
				<button class="tag-add">asdsad</button>
			</span> -->
		</view>

	</view>
	<!-- asasas -->
		</view>
</template>

<script>
	export default {
		data() {
			return {
				top_tab:["发布"],
				shoopimg:'',
				shooptitle:'',
				comment:'',
				nowlength:0,
				maxlength:100,
				postGroupImg:"",
				postGroupName:"",
				defaultimgvdo:[
					{
						srcimg:'/static/post/add.png',
						
						type:'img'
					}
				],
				realyimhlist:[],
				
			}
		},
		onLoad(option) {
			this.shoopimg = JSON.parse(option.evalu).image
			this.shooptitle = JSON.parse(option.evalu).title
		},
		methods: {
			bindTextAreaBlur: function (e) {
				this.comment = e.detail.value
				console.log(e.detail.value)
			},
			bindTextAreaInput:function(e){
				let valleng = e.detail.value.length
				this.nowlength = valleng
				if(this.nowlength >= this.maxlength){
					uni.showToast({
						icon:"none",
						title:"最多输入"+this.maxlength+"个文字"
					})
				}
			},
			upfile(type){
				if(type == 'img'){
					uni.chooseImage({
					    success: (chooseImageRes) => {
					        const tempFilePaths = chooseImageRes.tempFilePaths;
					        // uni.uploadFile({
					        //     url: 'http://192.168.31.75:8080/', //仅为示例，非真实的接口地址
					        //     filePath: tempFilePaths[0],
					        //     name: 'file',
					        //     formData: {
					        //         'user': 'test'
					        //     },
					        //     success: (uploadFileRes) => {
					        //         console.log(uploadFileRes.data);
					        //     }
					        // });
							this.realyimhlist = tempFilePaths
							console.log(chooseImageRes,tempFilePaths)
					    }
					});
				}
			},
			commentfun(){
				uni.showToast({
					icon:"success",
					title:"发表成功"
				})
				this.comment = ""
				this.realyimhlist = []
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		// 导航栏
		.navBar{
			width: 100%;
			height: 90rpx;
			display: flex;
			background-color: #B0E3FF;
			position: fixed;
			z-index: 1000;
			.left{
				display: inline-block;
				height: 100%;
				width: 200rpx;
				margin-top:20rpx;
				.left-icon{
					margin-right: 20rpx;
					}
			}
			.center{
				display: inline-block;
				height: 100%;
				flex: 1;
				text-align: center;

			}
			.right{
				display: inline-block;
				height: 100%;
				width: 200rpx;
				margin-top: 10rpx;
				.right-icon{
					
					margin-left: 20rpx;
				}
				.uni-tab-item {
					/* #ifndef APP-PLUS */
					display: inline-block;
					/* #endif */
					flex-wrap: nowrap;
					padding-left: 100rpx;
					padding-right: 5rpx;
				}
				.uni-tab-item-title {
					padding: 5rpx;
					color: #FFFFFF;
					font-size: 33rpx;
					height: 80rpx;
					line-height: 80rpx;
					flex-wrap: nowrap;
					border-width: 1rpx;
					border-style:solid;
					border-radius: 14rpx;
					/* #ifndef APP-PLUS */
					white-space: nowrap;
					/* #endif */
				
				}
			}
			
		}

	}
	.evaluate{
		padding-right: 38rpx;
		padding-left: 18rpx;
		width: 100%;
		.evaluateflex{
			display: flex;
			align-items: center;
			padding: 10upx 20upx;
			border-bottom: 1px solid #efeff4;
			.evshoopimg{
				width: 100upx;
				height: 100upx;
				margin-right: 20upx;
			}
			.evshooptitle{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-size: 32upx;
			}
		}
		.input-textarea{
			padding-top: 100rpx;
			padding-left: 20rpx;
			.textaerav{
				width: 100%;
				height: 200upx;
			}
			.nowtextnum{
				text-align: right;
				font-size: 32upx;
				border-top: 1px solid #F1F1F1;
				padding: 10upx 0;
			}
			.upimg-video{
				.defaultup{
					display: flex;
					align-items: center;
					.defaultupflex{
						border:1px dashed #b5b5b5;
						color: #b5b5b5;
						font-size: 24upx;
						text-align: center;
						padding: 20upx;
						margin-right: 20upx;
						cursor: pointer;
						.defaultimg{
							width: 80upx;
							height: 80upx;
						}
					}
				}
				.realyimg{
					border-top: 1px solid #F1F1F1;
					border-bottom: 1px solid #F1F1F1;
					margin: 20upx 0;
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.realyimgflex{
						flex: 0 0 25%;
						text-align: center;
						.imgborder{
							margin: 10upx;
							border:1px solid #F1F1F1;
							.limitimg{
								width: 80upx;
								height: 80upx;
							}
						}
					}
				}
			}
		}
		.sendcomment{
			padding: 0 20upx;
			margin: 40upx 0;
		}
		.inline-text{
			padding-bottom: 15rpx;
			padding-top: 15rpx;
			font-weight: bold;
			font-size: 40rpx;
			.small{
				font-size: 10rpx;
				color: #AAAAAA;
			}
		}
		.add-button{
			
			color: #FFFFFF;

			// border:1px solid #b0e3ff;
			background-color: #b0e3ff;
			top: 20rpx;
		}
		.chose-group{
			height: 150rpx;
			width: 100%;
			display: flex;
			// background-color: blue;
			.group-img{
				vertical-align: middle;
				width: 170rpx;
				height: 100%;
				border: 1px solid #ffffff;
				border-radius: 50%;
				
			}
			.group-text{
				padding-top: 20rpx;
				padding-left: 80rpx;
				padding-right: 80rpx;
				font-size: 40rpx;
				height: 100%;
				color: #808080;
				flex: 1;
				
				// background-color: red;
				
			}
			.group-button{
				
				color: #FFFFFF;
				border:1px solid #dcdcdc;
				-webkit-border-top-left-radius:12px;
				-moz-border-radius-topleft:12px;
				border-top-left-radius:12px;
				-webkit-border-top-right-radius:12px;
				-moz-border-radius-topright:12px;
				border-top-right-radius:12px;
				-webkit-border-bottom-left-radius:12px;
				-moz-border-radius-bottomleft:12px;
				border-bottom-left-radius:12px;
				-webkit-border-bottom-right-radius:12px;
				-moz-border-radius-bottomright:12px;
				border-bottom-right-radius:12px;
				background-color: #169bd5;
				padding-left: 65rpx;
				padding-right: 65rpx;
				padding-bottom: 85rpx;
				vertical-align: middle;
				height: 50%;
				display: inline-block;
				padding-right: 50rpx;
				padding-left: 50rpx;
				right: 2;
				width: 200rpx;
				top: 25rpx;
			}
		}
		.tag-text{
			padding-bottom: 15rpx;
			padding-top: 15rpx;
			font-weight: bold;
			font-size: 40rpx;
			.small{
				font-size: 10rpx;
				color: #AAAAAA;
			}
			padding-top: 30rpx;
		}
		.tag{
			float: left;
		}
		.tag-add{
			padding-left: 10rpx;
			padding-right: 20rpx;
		}
	}
</style>
